<template>
  <div class="my">
    <button @click="goback">返回</button>
    <div class="round-box"><div class="round"></div></div>

    <div class="box">
      <div class="my-top">
        <div class="icon">
          <van-uploader :after-read="afterRead" :before-read="beforeRead"
            ><img :src="store.state.login.result.header_img" alt=""
          /></van-uploader>
        </div>

        <div class="content">
          <h3>{{ store.state.login.result.name }}</h3>
          <h4>ID:{{ store.state.login.result.id }}</h4>
          <ul>
            <li>
              <p class="title">红包</p>
              <p>218</p>
            </li>
            <li>
              <p class="title">优惠券</p>
              <p>12张</p>
            </li>
            <li>
              <p class="title">仙豆</p>
              <p>300</p>
            </li>
            <li>
              <p class="title">白条</p>
              <p>1000.00</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <router-link :to="{ path: item.path }">
              <div class="link">
                <div class="logo"><img :src="item.logoUrl1" alt="" /></div>
                <p>{{ item.name }}</p>
                <div class="logo1">
                  <img src="../../assets/my/rightarrow.png" alt="" />
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="guessLike">
        <div class="title">
          <h4><van-icon name="like-o" />猜你喜欢</h4>
        </div>
        <div
          class="demo"
          v-masonry
          gutter="5"
          percent-position="true"
          fit-width="true"
        >
          <div
            v-masonry-tile
            class="card"
            v-for="(item, index) in goodsData"
            :key="index"
          >
            <img :src="item.s_goods_photos[0].path" alt="" />

            <div class="text">
              <p class="instroduction">{{ item.desc }}</p>
              <p class="price">
                <span style="font-size: 13px">￥</span>
                <span>{{ item.price }}.</span><span>00</span>
              </p>
              <!-- <div class="sell"> 评论{{Math.floor(Math.random() * 10 + 1)}}0+</div> -->
              <div class="box1" v-show="index % 3 == 1 && index % 5 != 0">
                <div class="dicount1">满99-15元</div>
              </div>
              <div class="box2" v-show="index % 5 == 0 && index % 3 != 1">
                <div class="dicount2">超值捡漏</div>
                <span>仅剩两天</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <doucker :choossIndex="3" />
  </div>
</template>
<script>
// export default{
//   //做数据缓存就要给该页面起名
//     name:"my"
// }
</script>
<script setup>
import { reactive, ref } from "vue";
import { setSession, getSession } from "../../utils/index.js";
import doucker from "../../components/doucker.vue";
import { useStore } from "vuex";
import { Toast } from "vant";
import { post, postFile, put, getData } from "../../utils/request.js";
import { useRoute, useRouter } from "vue-router";
const store = useStore();
const route = useRoute();
const router = useRouter();
// const goback=()=>{
//    store.commit('changeRouterType','back')
//    router.back()
// }
const goodsData = ref();

const getGoodsData = async () => {
  const data = {
    project_id: 234,
  };
  let result = await getData("/classify/classifyGoods", data);

  let index = Math.floor(Math.random() * 10) + 1;
  console.log(result.data.result[index].s_goods);
  goodsData.value = result.data.result[index].s_goods;
};
getGoodsData();
let list = reactive([
  {
    logoUrl1: require("../../assets/my/wallet.png"),
    name: "我的钱包",
    path: "",
  },
  {
    logoUrl1: require("../../assets/my/location.png"),
    name: "我的地址",
    path: "/myAddress",
  },
  {
    logoUrl1: require("../../assets/my/service.png"),
    name: "客服与帮助",
    path: "",
  },
]);

const gtouchstart = () => {
  console.log(84956123);
};

//修改用户数据 主要用于数据库中用户头像
const updateUserData = async (path) => {
  let data = ref({
    name: store.state.login.result.name,
    header_img: path,
    password: store.state.login.result.password,
    phone: store.state.login.result.phone,
  });
  let timer;
  let result;
  console.log(store.state.login.result.id);
  try {
    result = await put(`/user/${store.state.login.result.id}`, data.value);
  } catch (error) {
    console.log(error);
    timer = setTimeout(() => {
      Toast.fail({ message: "提交头像失败，请稍后再试", forbidClick: true });
      clearTimeout(timer);
    }, 3000);
  }
  if (result.status == 200) {
    Toast.success({ message: "提交头像成功", forbidClick: true });
    //更新数据到vuex
    let data = {
      password: store.state.login.result.password,
      phone: store.state.login.result.phone,
    };
    result = await post("/login", data);
    store.commit("login/getToken", result.data.result);
  }
};

const afterRead = async (file) => {
  let result;

  try {
    let timer;
    result = await updateUserImg(file);
  } catch (error) {
    console.log(error);
    timer = setTimeout(() => {
      Toast.clear();
      Toast.fail({ message: "上传失败，请稍后重新上传", forbidClick: true });
      clearTimeout(timer);
    }, 3000);
  }
  if (result.status == 200) {
    //
    updateUserData(result.data.result.path);
  }
};

//修改用户数据 主要用于数据库中用户头像

//上传头像
function updateUserImg(file) {
  return new Promise((resolve, reject) => {
    let formData = new FormData();
    formData.append("file", file.file);
    postFile("/update", formData).then((res) => {
      resolve(res);
    });
  });
}

const beforeRead = (file) => {
  if (!/\.(jpg|jpeg|png|jpg|png)$/i.test(file.name)) {
    Toast("图片类型必须是.gif,jpeg,jpg,png中的一种,请重新上传");
    return false;
  }
  if (file.size > 512000) {
    Toast("上传图片大小不能超过2mb");
  }

  return true;
};
</script>

<style lang="scss" scoped>
.my {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f1f1f1;
  .round-box {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    position: absolute;
    .round {
      width: 150vw;
      height: 150vw;
      border-radius: 50%;
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+64,fb955e+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f85032+0,f6290c+25,f6290c+25,f16f5c+50,f02f17+71,e73827+100 */
background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top,  #f85032 0%, #f6290c 25%, #f6290c 25%, #f16f5c 50%, #f02f17 71%, #e73827 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f85032 0%,#f6290c 25%,#f6290c 25%,#f16f5c 50%,#f02f17 71%,#e73827 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f85032 0%,#f6290c 25%,#f6290c 25%,#f16f5c 50%,#f02f17 71%,#e73827 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */


      //transform: scale(1.5,1.5);
      position: absolute;
      left: -25vw;
      top: -80vw;
      z-index: 1;
    }
  }
  .box {
    position: absolute;
    margin-top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .my-top {
      box-sizing: border-box;
      width: 90.6vw;
      height: 54.1vw;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
 position: relative;
      //position: absolute;
      border-radius: 3vw;

      padding-top: 15vw;
      .icon {
        width: 26.6vw;
        height: 26.6vw;
        position: absolute;
        z-index: 3;
        left: 50%;
        margin-left: -13.3vw;
        top: -23%;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        ul {
          display: flex;
          justify-content: space-around;
          width: 100%;
          height: 19.7vw;
          border-top: 1px solid #c1c0c9;
          li {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

            .title {
              font-size: 3vw;
              color: #c1c0c9;
            }
          }
        }
        h3,
        p {
          margin: 0;
        }
        h3 {
          font-weight: normal;
          color: #262628;
          font-size: 6vw;
        }
        h4 {
          font-weight: normal;
          color: #c1c0c9;
          font-size: 3vw;
        }
      }
    }
    .list {
      width: 90vw;
      height: 18vh;
      background-color: white;
      margin-top: 1vh;
      border-radius: 3vw;
      position: relative;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 3vw;
        li {
          display: flex;
          flex-direction: column;

          .link {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            p {
              margin: 0;
              margin-left: 3vw;
              font-family: PingFangSC-Regular;
              font-size: 4vw;
              color: #262626;
            }
          }
          .logo1,
          .logo {
            width: 3vw;
            height: 2vh;

            img {
              height: 100%;
              width: 100%;
            }
          }
          .logo {
            width: 5vw;
            height: 3vh;
          }
          .logo1 {
            position: absolute;
            right: 1vw;
            float: right;
          }
        }
      }
    }
  }
  .guessLike {
    margin-top: 1vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      color: #f32428;
      h4{
        margin: 0 4vh;
      }
    }
    .demo {
      margin: 0 auto;
      margin-top: 1vh;
      width: 100vw;
      height: 100vh;
      background-color: #f1f1f1;
      position: relative;
      list-style: none;
      box-sizing: border-box;
      padding: 1vw;
      padding-bottom:10vh ;
      
      .card {
        position: absolute;
        width: 48vw;
        padding: 3vw;
        padding-bottom: 1vh;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 1vh;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        img {
          width: 100%;
          display: block;
          height: auto;
        }
        .text {
          margin: 0 auto;
          width: 95%;

          .instroduction {
            width: 100%;
            text-align: left;
            margin: 1vh 0;
            word-break: break-all;
            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-line-clamp: 2;

            overflow: hidden;
          }
          .price {
            color: #ff4142;
            //line-height: 1.5;
            margin: 1vh 0;
            display: block;
            font-size: 16px;
            display: flex;
            align-items: flex-end;
            span {
              font-size: 12px;
            }
          }
          .price > :nth-child(1) {
            line-height: 17px;
          }
          .price > :nth-child(2) {
            font-size: 20px;
            line-height: 19px;
          }
          .sell {
            color: #999;
            margin-top: 1vh;
            font-size: 12px;
            display: flex;
          }
          .box1 {
            width: 50%;
            padding: 1px;
            border-radius: 10px;
            background-color: rgba($color: #fa1e32, $alpha: 0.2);
            .dicount1 {
              background-color: #fa1e32;
              height: 3vh;
              color: white;
              border-radius: 10px;
              line-height: 3vh;
              font-size: 12px;
              font-weight: 700;
              text-align: center;
            }
          }
          .box2 {
            display: flex;
            padding: 1px;
            border-radius: 10px;
            background-color: rgba($color: #fa1e32, $alpha: 0.2);
            font-size: 12px;
            line-height: 3vh;
            .dicount2 {
              padding: 0 1vw;
              background-color: #fa1e32;
              height: 3vh;
              color: white;
              border-radius: 10px;
              line-height: 3vh;
              font-size: 12px;
              font-weight: 700;
              text-align: center;
            }
            span {
              display: block;
              transform: scale(0.8, 0.8);
              color: #fa1e32;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
